<template>
	<view class="product-detail">
		<msg-queue :msgs="msgList"></msg-queue>
		<view class="product-swiper-box">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" circular autoplay @change="changeIndicatorDots">
						<swiper-item v-for="(item,i) in swiperList" :key="i">
							<image :src="item" :webp="true" mode="aspectFill" class="swiper-item" ></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<text class="exchange-rule" @click="showRule=true">兑换规则</text>
			<view class="swiper-index">{{curIndex}}/{{swiperList.length}}</view>
		</view>
		<view class="product-info">
			<text class="iconfont icon-heart"></text>
			<text class="heart-num">{{goodInfo.need_wish_coin}}</text>
			<text class="product-price"  v-if="goodInfo.show_platform_price!==0">{{goodInfo.platform_name}}¥{{goodInfo.platform_price}}</text>
			<view class="product-name">{{goodInfo.goods_name}}<text v-if="goodInfo.goods_specification">（{{goodInfo.goods_specification}}）</text></view>
			<view class="product-desc">{{goodInfo.goods_title}}</view>
			<view class="product-tags" v-if="goodInfo.tagList.length>0">
				<text class="product-tag" :class="{'free-tag':goodInfo.can_free===1&&index===0}" v-for="(tag,index) in goodInfo.tagList" :key="index">{{tag}}</text>
			</view>
			<view class="free-tip" v-if="goodInfo.can_free===1">{{goodInfo.free_support_tips}}</view>
		</view>
		<view class="support-box" v-if="supportList.length>0">
			<view class="support-title">支持他人心愿，得心愿值</view>
			<swiper class="support-swiper" :class="{single:supportList.length===1}" :display-multiple-items="supportList.length===1?1:2" vertical circular autoplay >
				<swiper-item v-for="(item,i) in supportList" :key="i">
					<view class="support-list" >
						<user-avatar class="li-header" :src="item.avatar_url" />
						<view class="li-cont">
							<view class="progress-title">还差 <text class="progress-num">{{item.need_people-item.join_people}}</text>人 达成该好物心愿</view>
							<wish-progress :value="item.join_people/item.need_people" bg="#F1F1F1"></wish-progress>
						</view>
						<view class="li-support-btn" :class="{disabled:item.is_support}" @click="onListSupport(item,i)"><text>{{item.is_support?'已支持':'支持TA'}}</text></view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="product-intro-line"><text>详情</text></view>
		<view class="product-intro-box" v-if="introList.length>0">
			<image :src="item" :webp="true" class="intro-img" mode="widthFix" lazy-load v-for="(item,i) in introList" :key="i"></image>
		</view>
		<view class="product-detail-footer">
			<view class="footer-short-box" v-if="shortNum>0">
				<view class="footer-short-balance">你的心愿值余额<icon-heart />{{coinNum}}</view>
				<view class="footer-short-title">还差<icon-heart /><text class="footer-short-num">{{shortNum}}</text>发起该心愿</view>
			</view>
			<view class="detail-footer-desc" v-else>消耗<icon-heart /><text class="footer-heart-num">{{goodInfo.need_wish_coin}}</text>发起该心愿</view>
			<view class="exchange-disabled" v-if="goodInfo.goods_status===0">已下架</view>
			<view class="exchange-disabled" v-else-if="goodInfo.goods_stock<=0"><text>库存不足</text><text>加紧补货中</text></view>
			<view class="exchange-immediately" v-else-if="shortNum>0" @click="onBottomGetClick">获取心愿值</view>
			<view class="exchange-immediately" v-else @click="onBottomExchangeClick">立即发起</view>
			
		</view>
		<!--心愿值不足弹窗-->
		<!-- <uni-popup ref="shortPopup" type="center" :mask-click="false">
			<view class="exchange-popup">
				<image class="exchangepop-image" src="/static/short-bg.png" mode="scaleToFill" />
				<view class="exchangepop-cont">
					<view class="exchangepop-title">
						<text>还差</text>
						<text class="iconfont icon-heart"></text>
						<text class="heart-num">{{shortNum}}</text>
						<text class="exchangepop-title-suffix">即可兑换该好物</text>
					</view>
					<text class="exchangepop-desc">支持他人心愿可以获得心愿值哦～</text>
					<view class="got-value-button" @click="onShortClick">立即获取心愿值</view>
				</view>
			</view>
		</uni-popup> -->
		<!--获取心愿值弹窗-->
		<multi-support-popup ref="multi" @success="onMultiSuccess"></multi-support-popup>
		<!-- 单个支持弹窗 -->
		<single-support ref="single" @success="onSuccessSupport" :showMore="false"></single-support>
		<!--支持成功弹窗-->
		<support-success :visible.sync="showSuccess" :getNum="getNum" :showClose="false" />
		<!-- 兑换规则弹窗 -->
		<confirm-popup :visible.sync="showRule" popupClass="rule-popup" title="兑换规则" showClose :showCancel="false" :showConfirm="false">
			<scroll-view scroll-y class="rule-popup-content">
				<image :src="ruleImg" mode="widthFix" class="rule-img"></image>
			</scroll-view>
		</confirm-popup>
		<!-- 邀请分享弹窗 -->
		<confirm-popup :visible.sync="showInvite" showClose :showCancel="false" :showConfirm="false">
			<view class="invite-tip">
				你刚刚发起了一个好物心愿，邀请好友支持能加速心愿达成哦~
			</view>
			<view class="invite-btn" @click="goInvite">去邀请好友支持</view>
		</confirm-popup>
		<!-- 登录弹窗 -->
		<login-popup :visible.sync="showLogin" @success="onLoginSuccess"/>
		<!-- 新人弹窗 -->
		<new-guy-popup isTopOffset></new-guy-popup>
	</view>
	
</template>

<script>
	import LoginPopup from '@/components/login-popup.vue'
	import { mapGetters } from 'vuex'
	import UserAvatar from '@/components/user/avatar.vue'
	import SingleSupport from '@/components/popups/single-support-popup.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import NewGuyPopup from '@/components/popups/new-guy-popup.vue'
	import MultiSupportPopup from '@/components/popups/multi-support-popup.vue'
	import ConfirmPopup from '@/components/confirm-popup.vue'
	import SupportSuccess from '@/components/support-success-popup.vue'
	import WishProgress from '@/components/wish-progress.vue'
	import MsgQueue from '@/components/msg-queue.vue'
	// #ifdef MP-WEIXIN
	import ShareMixin from '@/mixins/share-mixin.js'
	// #endif
	export default {
		// #ifdef MP-WEIXIN
		mixins: [ShareMixin],
		// #endif
		components:{
			uniPopup,
			SupportSuccess,
			UserAvatar,
			WishProgress,
			ConfirmPopup,
			MultiSupportPopup,
			LoginPopup,
			SingleSupport,
			MsgQueue,
			NewGuyPopup
		},
		data() {
			return {
				topShareInfo:{
					share_title:'我在心愿圈发现了一个很不错的好物，快来看看吧！',
					path:'',
					share_img:'https://cdn.zhixianggo.com/config/f26ecd782a8e082eda2d5f311950dc2e.png'
				},
				goodsId:'',
				swiperList:[],
				supportList:[],
				introList:[],
				curIndex: 1,
				goodInfo:{
					platform_name:'',
					platform_price:''
				},
				showSuccess:false,
				getNum:0,
				ruleImg:'',
				showRule:false,
				selWish:{},
				singleSupportVisible:false,
				showLogin:false,
				isLoginFromSingle:false,
				showInvite:false,
				inviteInfo:'',
				msgList:[]
			}
		},
		computed:{
			shortNum(){
				return this.$num.minus((this.goodInfo.need_wish_coin||0),this.coinNum)
			},
			...mapGetters([
				'coinNum',
				'hasBind'
			])
		},
		onLoad(data) {
			this.goodsId=data.goods_id
			this.getDetail()
			uni.$on('showInvite',data=>{
				this.inviteInfo=data
				this.showInvite=true
			})
			uni.$on('closeInvite',data=>{
				this.showInvite=false
			})
			uni.$on('refreshGoods',data=>{
				this.getDetail(false)
			})
			this.topShareInfo.path=`/pages/product/product-detail?goods_id=${this.goodsId}`
			this.getMarqueue()
			this.getRule()
		},
		onShow(){
			this.$store.dispatch('getUserInfo')
		},
		methods:{
			async getDetail(showLoading=true){
				let data = await this.$api.productDetail({goods_id:this.goodsId},{loading:showLoading})
				this.goodInfo=data.goods_info
				if(this.goodInfo.goods_label){
					this.goodInfo.tagList=this.goodInfo.goods_label.split(',')
				}
				this.supportList=data.support_list
				this.swiperList=this.goodInfo.carousel_img_list
				this.$nextTick(()=>{
					setTimeout(()=>{
						this.introList=this.goodInfo.content_img_list
					},1000)
				})
			},
			changeIndicatorDots(current,source) {
				this.curIndex = current.detail.current + 1
			},
			async onBottomExchangeClick(){
				if(!this.hasBind){
					this.isLoginFromSingle=false
					return this.showLogin=true
				}
				this.goOrder()
				
			},
			onBottomGetClick(){
				this.$refs.multi.open({
					id:this.goodsId,
					shortNum:this.shortNum,
					scene:'product'
				})
			},
			onShortClick(){
				this.$refs.multi.open({
					id:this.goodsId,
					shortNum:this.shortNum,
					scene:'product'
				})
			},
			onLoginSuccess(){
				if(this.isLoginFromSingle){
					this.$refs.single.open({wish:this.selWish})
				}else{
					this.onBottomExchangeClick()
				}
			},
			goOrder(){
				uni.navigateTo({
					url:`/pages/pubilsh/order?goods_id=${this.goodsId}`
				})
			},
			goInvite(){
				uni.navigateTo({
					url:`/pages/pubilsh/success?wish=${this.inviteInfo}`
				})
			},
			onMultiSuccess(getNum){
				// if(getNum>=this.shortNum){
				// 	this.$refs.shortPopup.close()
				// }
				this.getNum=getNum
				this.showSuccess=true
				setTimeout(()=>{
					this.showSuccess=false
					if(getNum>=this.shortNum){
						this.goOrder()
					}
				},1500)
			},
			onSuccessSupport(){
				this.selWish.is_support=true
				this.selWish.join_people=this.selWish.join_people+1
				// this.supportList.splice(i,1,item)
			},
			async onListSupport(item,i){
				if(item.is_support){
					return
				}
				this.selWish=item
				this.selWishIndex=i
				if(!this.hasBind){
					this.showLogin=true
					this.isLoginFromSingle=true
				}else{
					this.$refs.single.open({wish:item})
				}
			},
			async getRule(){
				let data = await this.$api.getExchangeRule({},{loading:false})
				this.ruleImg=data.img
			},
			async getMarqueue(){
				let data = await this.$api.getGoodsMarqueue({goods_id:this.goodsId},{loading:false})
				this.msgList=data
			}
		}
	}
</script>

<style lang="scss">
.product-detail{
	padding-bottom:calc(98rpx + var(--safe-area-inset-bottom));
	min-height:100%;
	background-color:#f6f6f6;
	.uni-bg-gray{
		width:100%;
		height:20rpx;
	}
	.product-swiper-box{
		position:relative;
		height:750rpx;
	}
	.page-section,.page-section-spacing,swiper,{
		height:100%;
		.swiper-item{
			height: 100%;
			width: 100%;
		}
	}
	.exchange-rule{
		position: absolute;
		padding:9rpx 20rpx;
		right:0rpx;
		top:0rpx;
		font-size:24rpx;
		color:#fff;
		z-index: 9;
		background-color:rgba(0,0,0,0.3);
		border-radius:0rpx 0rpx 0rpx 27rpx;
	}
	.swiper-index{
		position: absolute;
		bottom:20rpx;
		right:20rpx;
		padding:5rpx 18rpx;
		background:rgba(0,0,0,0.3);
		border-radius:25rpx;
		font-size:22rpx;
		color:#fff;
	}
	.product-info{
		padding:42rpx 36rpx;
		background-color: #fff;
	}
	.product-info .icon-heart{
		font-size:46rpx;
	}
	.product-price{
		margin-left:30rpx;
		font-size:24rpx;
		color:#999;
	}
	.product-name{
		margin-top:31rpx;
		line-height: 48rpx;
		font-size: 34rpx;
		color: #333;
	}
	.product-desc{
		margin-top:8rpx;
		font-size: 24rpx;
		color:#999;
	}
	.product-tags {
		margin-top:12rpx;
		display: flex;
		align-items: center;
	}
	
	.product-tag {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0 6rpx;
		height: 30rpx;
		font-size: 20rpx;
		color: #E7404A;
		border-radius: 4rpx;
		border: 1rpx solid rgba(231, 64, 74, 1);
		;
		&:not(:last-child){
			margin-right: 10rpx;
		}
		&.free-tag{
			background-color: #E7404A;
			color:#fff;
		}
	}
	.free-tip{
		margin-top: 21rpx;
		font-size: 22rpx;
		color:#E7404A;
	}
	.heart-num{
		margin-left:10rpx;
		font-size:48rpx;
		font-weight: 600;
		color:#E7404A;
	}
	.support-box{
		margin-top:20rpx;
		margin-bottom: 20rpx;
		padding:30rpx 0;
		background-color: #fff;
	}
	.support-title{
		padding-left: 36rpx;
		padding-bottom: 20rpx;
		font-size:26rpx;
		color: #999;
		border-bottom: 1rpx solid #D8D8D8;
	}
	.progress-num{
		padding:0rpx 5rpx;
		color:#E7404A;
	}
	.support-swiper{
		margin-top: 20rpx;
		padding: 0 36rpx;
		height: 240rpx;
		&.single{
			height: 120rpx;
		}
	}
	.support-list{
		display: flex;
		align-items: center;
		padding: 20rpx 0;
	}
	.li-header{
		margin-right:30rpx;
	}
	.li-cont{
		flex:1;
		font-size:26rpx;
		color:#333;
	}
	.progress-title{
		margin-bottom:13rpx;
	}
	.li-support-btn{
		margin-left:50rpx;
		width:170rpx;
		height:70rpx;
		line-height: 70rpx;
		background:#FBC05B;
		border-radius:35px;
		font-size:28rpx;
		font-weight: 600;
		text-align: center;
		color:#fff;
		&.disabled{
			background-color: #999;
		}
	}
	.product-intro-line{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height:100rpx;
		background:rgba(246,246,246,1);
		&::before{
			content: '';
			position: absolute;
			top:49rpx;
			width: 90%;
			margin: 0 auto;
			border-top: 1rpx solid #D8D8D8;
			z-index: 1;
		}
		>text{
			position: relative;
			padding: 0 13rpx;
			font-size: 26rpx;
			color:#999;
			background:rgba(246,246,246,1);
			z-index: 2;
		}
	}
	.product-intro-box{
		.intro-img{
			display: block;
			width: 100%;
			height: auto;
		}
	}
	.product-detail-footer{
		position: fixed;
		display: flex;
		bottom:0rpx;
		left:0rpx;
		z-index: 5;
		width:100%;
		height:98rpx;
		background:#fff;
		padding-bottom: var(--safe-area-inset-bottom);
		box-sizing: content-box;
		box-shadow:0px -2px 20px 0px rgba(0,0,0,0.06);
	}
	.footer-short-box{
		display: flex;
		flex:1;
		padding-left:36rpx;
		flex-direction: column;
		justify-content: center;
	}
	.footer-short-title{
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color:#E7404A;
		>text{
			font-size: 32rpx;
		}
		.footer-short-num{
			font-weight: bold;
		}
	}
	.footer-short-balance{
		font-size: 22rpx;
		color:#000;
		.iconfont{
			font-size: 22rpx;
		}
	}
	.detail-footer-desc{
		flex:1;
		padding-left:36rpx;
		line-height: 97rpx;
		font-size:26rpx;
		font-weight: 400;
		color:#000;
		border-top: 1rpx solid #E2E2E2;
	}
	.detail-footer-desc .icon-heart{
		padding: 0rpx 5rpx 0rpx 10rpx;
		font-size:30rpx;
		font-weight: 600;
	}
	.gowill-footer-desc{
		flex:1;
		display: flex;
		flex-direction: column;
		// text-align: left;
		// align-items: center;
		justify-content: center;
		padding-left: 36rpx;
	}
	.selected-value{
		font-size:26rpx;
		color:#000;
	}
	.selected-summery{
		font-size: 32rpx;
		font-weight: 600;
		color:#E7404A;
	}
	.selected-desc{
		font-size:22rpx;
		font-weight: 400;
		color:#E7404A;
	}
	.footer-heart-num{
		margin-right:10rpx;
		font-weight: 600;
		font-size:32rpx;
		color:#E7404A;
	}
	.exchange-immediately,.exchange-disabled{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 300rpx;
		background:#E7404A;
		font-size:36rpx;
		font-weight: 600;
		color:#fff;
	}
	.exchange-disabled{
		background-color: #999;
	}
	.exchange-popup{
		position: relative;
		width: 560rpx;
		background-color:#fff;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.exchangepop-icon-close{
		position: absolute;
		bottom:-80rpx;
		left:0;
		width:100%;
		font-size:48rpx;
		color:#fff;
		text-align: center;
	}
	.exchangepop-cont{
		padding:40rpx;
		text-align: center;
	}
	.exchangepop-image{
		height:280rpx;
		width: 100%;
	}
	.exchangepop-title{
		font-size:32rpx;
		font-weight: 600;
		color:#000;
	}
	.exchangepop-title .icon-heart{
		margin-left:10rpx;
		font-size:40rpx;
		font-weight: normal;
	}
	.exchangepop-title .heart-num{
		font-size:40rpx;
	}
	.exchangepop-title-suffix{
		margin-left:10rpx;
		color:#333;
	}
	.exchangepop-desc{
		margin-top:30rpx;
		font-size:26rpx;
		font-weight: 400;
		color:#E7404A;
	}
	.got-value-button{
		margin-top:50rpx;
		width:100%;
		height:88rpx;
		line-height:88rpx;
		background-color: #E7404A;
		border-radius: 10rpx;
		font-size: 36rpx;
		font-weight: 600;
		color:#fff;
		text-align: center;
	}
	.rule-popup{
		padding: 30rpx 20rpx!important;
		
	}
	.rule-popup-content{
		max-height: 500rpx;
		overflow-y:auto;
	}
	.rule-img{
		display: block;
		width: 100%;
		max-width:100%;
	}
}
.invite-tip{
	font-size: 28rpx;
	color:#E7404A;
	margin-bottom: 40rpx;
}
.invite-btn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 88rpx;
	font-size:36rpx;
	color:#fff;
	border-radius:10rpx;
	background-color: #E7404A;
}
</style>
